<template>
  <div>
      <div class="fl w950">
        <Gerzhox/>
        <div class="game_consume">
          <div class="login_game">
            <p>最近登录的游戏</p>
            <ul>
              <div style="text-align:center;margin-top:40px;">暂无</div>
            </ul>
          </div>
          <div class="consumeCon">
            <div class="consume">
              <p>本月累计消费</p>
              <div class="consume_sum">
                <div class="fl">
                  <ul>
                    <li>本月消费总金额(元)</li>
                    <li class="red">0</li>
                  </ul>
                </div>
                <div class="fl">
                  <ul>
                    <li>本月成功订单数(笔)</li>
                    <li class="red">0</li>
                  </ul>
                </div>
                <div class="fl">
                  <ul>
                    <li>本月消费排名</li>
                    <li>暂无排名</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dj_save">
          <div class="save_num">本月道聚城为您省了：
            <span id="iSaveTotal">0&nbsp;Q币</span>
          </div>
        </div>
        <div class="userprivilege">
          <div class="mb10 clearfix center_box">
            <div class="center_tt">我的特权
              <i class="dot-tip"></i>
              <span class="line"><s class="l_5"></s></span>
            </div>
          </div>
          <div class="comm_bg userbox clearfix">
            <div>
              <dl>
              <dt>
              <a href="myprivilage.shtml" target="_blank" class="task-link">
             <i class="tqico coupons"></i>
             </a>
            </dt>
               <dd>
               <p>专享优惠券</p>
             </dd>
          </dl>
            </div>
             <div>
              <dl>
              <dt>
              <a href="myprivilage.shtml" target="_blank" class="task-link">
             <i class="tqico gift"></i>
             </a>
            </dt>
               <dd>
               <p>首次消费礼</p>
             </dd>
          </dl>
            </div> <div>
              <dl>
              <dt>
              <a href="myprivilage.shtml" target="_blank" class="task-link">
             <i class="tqico djgift"></i>
             </a>
            </dt>
               <dd>
               <p>道具逢十礼</p>
             </dd>
          </dl>
            </div>
             <div>
              <dl>
              <dt>
              <a href="myprivilage.shtml" target="_blank" class="task-link">
             <i class="tqico coupons"></i>
             </a>
            </dt>
               <dd>
               <p>消费成长礼</p>
             </dd>
          </dl>
            </div>
          </div>
        </div>
        <div class="usertask">
          <div class="mb10 clearfix center_box">
              <div class="center_tt">
                我的任务
                <i class="dot-tip"></i>
                <span class="line"><s class="l_5"></s></span>
              </div>
          </div>
          <div class="comm_bg userbox clearfix">
            <div>
              <dl>
                <dt>
                  <a href="#">
                    <i class="taskico signin"></i>
                  </a>
                </dt>
                <dd>
                     <p>每日签到</p>
                 </dd>
              </dl>
              <dl>
                <dt>
                  <a href="#">
                    <i class="taskico info"></i>
                  </a>
                </dt>
                <dd>
                     <p>完善资料</p>
                 </dd>
              </dl>
              <dl>
                <dt>
                  <a href="#">
                    <i class="taskico down"></i>
                  </a>
                </dt>
                <dd>
                     <p>下载APP</p>
                 </dd>
              </dl>
              <dl>
                <dt>
                  <a href="#">
                    <i class="taskico login"></i>
                  </a>
                </dt>
                <dd>
                     <p>每日登录APP</p>
                 </dd>
              </dl>
              <dl>
                <dt>
                  <a href="#">
                    <i class="taskico appconsume"></i>
                  </a>
                </dt>
                <dd>
                     <p>APP首笔消费</p>
                 </dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="orderInfoCon">
          <div class="default_con clearfix" style="display: table;background: #fff;width: 100%;height:234px;margin-bottom:10px;">
            <div class="table_td" style="width: 540px;margin:57px auto">
              <div class="pic"></div>
              <div class="txt">
                   <p class="tt">抱歉，暂无任何订单信息！</p>
                   <p>您可以：</p>
                  <p>1、进入道聚城首页更多折扣道具等着你，<a href="//daoju.qq.com/mall" target="_blank" class="blue">立即前往&gt;</a></p>
                        </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Gerzhox from '@/views/commodity/gerzhox'
export default {
  components: { Gerzhox },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.fl {
    float: left;
  .iii{
   line-height: 24px;
   }
}
.progress{
  margin-left: 50px;
    width: 550px;
    height: 100px;
}
.w950{
  width: 950px;
  .comm_bd {
      border: 1px solid #e6e9ef;
      background-color: #ffffff;
  }
  .mb10 {
    margin-bottom: 10px;
 }
 .game_consume {
    width: 950px;
    height: 148px;
    margin-bottom: 20px;
   .login_game {
    width: 322px;
    height: 148px;
    border: 1px solid #e6e9ef;
    background: #fff;
    float: left;
   p {
    width: 306px;
    padding-left: 15px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e6e9ef;
    color: #333;
    font-size: 14px;
}
}
  .consume {
    width: 612px;
    height: 148px;
    border: 1px solid #e6e9ef;
    background: #fff;
    float: left;
    margin-left: 11px;
  p {
    width: 612px;
    padding-left: 15px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e6e9ef;
    color: #333;
    font-size: 14px;
}
}
   .consume_sum {
        margin: 16px 0 0 50px;
        height: 15px;
        line-height: 15px;
        color: #333;
        font-size: 14px;
        width: 590px;
     div {
    width: 195px;
    }
    ul li {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #333;
      }
    ul li.red {
    color: #eb4c4c;
    font-size: 28px;
}
    }
    }
    .dj_save {
    width: 948px;
    height: 44px;
    line-height: 44px;
    margin-bottom: 20px;
    background: #fffaeb;
    border: 1px solid #f6ecca;
    .save_num {
    margin-left: 15px;
    color: #333;
    font-size: 14px;
    span {
    color: #f74a4a;
    font-size: 18px;
}
}
 }
    .userprivilege {
    width: 948px;
    height: 255px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e6e9ef;
    .center_box {
    padding: 12px 3px 0px 20px;
    }
    .center_tt {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
    .dot-tip {
    position: absolute;
    left: 60px;
    top: 4px;
    height: 5px;
    width: 5px;
    border-radius: 5px;
    overflow: hidden;
    background-color: red;
    }
    .line {
    display: block;
    background: #e6e9ef;
    height: 1px;
    overflow: hidden;
    margin-top: 5px;
  }
    }
    }
        .mb10 {
        margin-bottom: 10px;
    }
    .userbox {
      dd {
    text-align: center;
}
    dl {
    width: 225px;
    height: 130px;
   border-right: 1px solid #e6e9ef;
    float: left;
    padding-top: 40px;
    .taskico {
    width: 105px;
    height: 110px;
    background: url(//js02.daoju.qq.com/common/images/mall/xyicon.png) no-repeat;
    display: block;
    margin: 0 auto;
      }
      .signin{
        background-position: -135px -379px
      }
      .signin:hover {
    background-position: -135px -523px;
    }
       .info{
        background-position: -316px -379px;
      }
      .info:hover{
        background-position: -316px -521px;
      }
        .down {
        background-position: -500px -379px;
    }
      .down:hover {
        background-position: -500px -521px;
    }
    .login {
    background-position: -679px -379px;
    }
    .login:hover {
    background-position: -679px -521px;
    }
  .appconsume {
    background-position: -863px -379px;
      }
      .appconsume:hover {
    background-position: -863px -521px;
      }
      }
    dt {
      text-align: center;
  }
  .tqico {
    width: 90px;
    height: 80px;
    background: url(//js02.daoju.qq.com/common/images/mall/xyicon.png) no-repeat;
    display: block;
    margin: 0 auto;
      }
          dl p {
          height: 40px;
          overflow: hidden;
          font-size: 14px;
          color: #3a3f4a;
          text-align: center;
      }
      .coupons{
        background-position: -135px -154px;
    }
    .coupons:hover {
      background-position: -135px -261px;
    }
    .gift{
        background-position: -358px -158px;
    }
     .gift:hover {
     background-position: -358px -263px;
    }
    .djgift {
        background-position: -585px -156px;
    }
    .djgift:hover {
      background-position: -587px -260px;
    }
    .coupons {
        background-position: -818px -154px;
    }
    .coupons:hover {
       background-position: -818px -261px;
    }
    }
    .comm_bg {
      background: #fff;
   }
   .usertask {
    width: 948px;
    min-height: 255px;
    height: auto;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e6e9ef;
    .center_box {
   padding: 12px 3px 0px 20px;
  }
  .userbox dl {
    width: 180px;
    height: 135px;
    float: left;
    padding-top: 0;
    border-right: 0;
     dt {
    text-align: center;
}
}
  }
  .center_tt {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
    .dot-tip {
    position: absolute;
    left: 60px;
    top: 4px;
    height: 5px;
    width: 5px;
    border-radius: 5px;
    overflow: hidden;
    background-color: red;
    }
    .line {
    display: block;
    background: #e6e9ef;
    height: 1px;
    overflow: hidden;
    margin-top: 5px;
}
    }
    .default_con{
      .pic {
    float: left;
    width: 100px;
    height: 100px;
    background: url(//js02.daoju.qq.com/common/images/emotion.png) no-repeat;
    }
    .txt {
        margin-left: 110px;
        padding-top: 26px;
    }
     .tt {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    padding-bottom: 10px;
}
    }
      }
</style>
